<template>
    <div class="c-wrap">
        <div v-if="platform==='mobile'"
             :style="{'background-color': headerColor,height:statusHeight+'px',width:'100%'}">
        </div>
        <mt-header v-if="platform!=='wechat'" fixed :title="title">
            <mt-button v-if="back" icon="back" slot="left" @click="click"></mt-button>
            <mt-button v-if="!back&&!token" slot="right" @click="$router.push({path:'/login'})">登录</mt-button>
        </mt-header>
        <div :style="{height:height+'px','background-color':bgColor,'overflow-y':'auto'}">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                height: app.config.setting.height.display - app.config.setting.height.top,
                headerColor: app.config.setting.headerColor,
                statusHeight: app.config.setting.statusHeight,
                platform: app.config.setting.platform,
                token: app.util.sessionStorage('token')
            }
        },
        computed: {
            pageTitle() {
                return this.title;
            }
        },
        watch: {
            pageTitle(val) {
                document.title = val;
                let iframe = document.createElement('iframe');
                // iframe.src = 'https://www.baidu.com/favicon.ico';
                iframe.style.display = 'none';
                document.body.appendChild(iframe);
                iframe.onload = function () {
                    setTimeout(function () {
                        iframe.remove();
                    }, 0)
                }
            }
        },
        mounted() {
            document.title = this.pageTitle;
        },
        props: {
            title: {
                type: String,
                default: ''
            },
            bgColor: {
                type: String,
                default: '#f0f0f0'
            },
            back: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            click() {
                if (this.$route.params.id) {
                    if (this.title === '用水详情') {
                        if (this.$route.params.id === '用量') {
                            this.$router.push({name: 'index', params: {id: '用量'}})
                        } else {
                            this.$router.push({
                                name: 'waterCharge', params: {id: 'index'}
                            })
                        }
                    } else if (this.title === '户号绑定') {
                        this.$router.push({
                            name: 'accountBinding', params: {id: 'index'}
                        })
                    } else if (this.title === '缴费') {
                        if (this.$route.params.id === 'index') {
                            this.$router.push({name: this.$route.params.id});
                        } else {
                            this.$router.push({
                                name: 'waterRemainder', params: {id: this.$route.params.id}
                            })
                        }
                    } else if (this.$route.params.id === '首页') {
                        this.$router.push({name: 'index', params: {id: '首页'}})
                    } else if (this.$route.params.id === '用量') {
                        this.$router.push({name: 'index', params: {id: '用量'}})
                    } else if(this.$route.params.id === '用水曲线'){
                        this.$router.go(-1);
                    } else{
                        this.$router.push({name: this.$route.params.id});
                    }
                } else {
                    // 九宫格回跳
                    if (this.title === '缴费' || this.title === '账户余额' || this.title === '缴费记录' || this.title === '用水统计' || this.title === '切换户号') {
                        this.$router.push({name: 'index', params: {id: '用量'}})
                    } else if (this.title === '绑定户号' || this.title === '业务记录' || this.title === '我的消息' || this.title === '公告通知' || this.title === '常见问题') {
                        this.$router.push({name: 'index', params: {id: '服务'}})
                    } else if (this.title === '密码修改' || this.title === '参数设置' || this.title === '意见反馈' || this.title === '推荐分享' || this.title === '关于我们' || this.title === '个人信息') {
                        this.$router.push({name: 'index', params: {id: '我的'}})
                    } else {
                        //未绑定户号的情况下，进入户号绑定页面，返回按钮时效
                        if (this.title === '户号绑定' && !app.util.localStorage('user.householdNo')) {
                            return
                        }
                        this.$router.go(-1)
                    }
                }
            }
        }
    }
</script>
<style>
    .c-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
